<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="titles"></c-nav-bar>
		<view style="padding-bottom:160rpx; background-color: #f5f5f5f5;">
			<view class="tophead">
				<view class="taocan">
					<view class="taocan1">
						<u--image :src="listData.productImg.split(',')[0]" width="224rpx" height="168rpx"></u--image>
					</view>
					<view class="taocan2">
						<view class="taoxxq1">
							{{listData.productName}}
						</view>
						<view class="taoxxq2">
							<!-- 周一至周日 · 需提前预约 -->
							{{listData.refundRemark}}
						</view>
					</view>
				</view>
				<view class="tuikuan">
					<view class="tuikuan1">
						退款数量
					</view>
					<view class="tuikuan2">
						{{listData.num}}
					</view>

				</view>
				<view class="tuikuan">
					<view class="tuikuan1">
						退款金额(实付金额)
					</view>
					<view class="tuikuan2">
						¥ {{listData.orderAmount}}
					</view>
				</view>
				<view class="tuikuan">
					<view class="tuikuan1">
						退款方式
					</view>
					<view class="tuikuan2">
						原路退回
					</view>
				</view>
			</view>
			<view class="tit">退订原因</view>
			<u-radio-group v-model="FormData.refundReason" placement="column" iconPlacement="right">
				<u-radio :customStyle="{padding: '28rpx 24rpx',borderBottom:'1px solid #eee',background:'#fff'}"
					v-for="(item, index) in checkboxList" :key="index" labelSize='26rpx' iconSize="22rpx" :size='30' :label="item.name"
					:name="item.name" @change="checks(item)" activeColor="#007A69">
				</u-radio>
			</u-radio-group>
			<view class="bnts">
				<u-button type="primary"
					customStyle="height:88rpx;border-radius:44rpx;background:#007A69;width:90%;font-size:32rpx"
					@click="refund">申请退款</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles: '申请退款',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				value1: "",
				mynum: 1,
				checkboxValue1: [],
				checkboxList: [{
						name: "买多了买错了",
					},
					{
						name: "其他平台/店里活动更优惠"
					},
					{
						name: "预约不上/排队太久"
					},
					{
						name: "联系不上商家"
					},
					{
						name: "计划有变没时间消费"
					},
					{
						name: "其他原因"
					},
				],
				value: 1,
				FormData: {
					orderCode: '',
					refundReason: '',

				},
				listData: {}
			}
		},
		onLoad(e) {
			this.listData = JSON.parse(e.list);
			this.FormData.orderCode = this.listData.orderCode;
		},
		methods: {
			refund() {
				this.$api.post('/api/merchant/food/scenic/merchant/order/refundFoodOrder', this.FormData)
					.then(res => {
						if (res.data.code == 500) {
							this.$showModal(res.data.msg);
						} else {
							this.$api.post('/order/icbc/refund', res.data.data).then(result => {
								if (result.statusCode === 200) {
									this.$showToast('退款成功');
									setTimeout(() => {
										uni.redirectTo({
											url: '/pagesMy/order/index?name=餐饮美食&type=0&typeIndex=6'
										})
									}, 1500)
								} else that.$showToast(result.data.msg);
							})

						}

					})
			},
			// 选择退订原因	
			checks(item) {
				this.FormData.refundReason = item.name
			},

		}
	}
</script>

<style scoped lang="scss">
	.tuikuan {
		display: flex;
		justify-content: space-between;

		.tuikuan1 {
			width: 300rpx;
			height: 100rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #777777;
			line-height: 100rpx;
			text-align: left;
			font-style: normal;
		}

		.tuikuan2 {
			width: 250rpx;
			height: 100rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 100rpx;
			text-align: right;
			font-style: normal;

			::v-deep .u-number-box {
				justify-content: flex-end !important;
			}
		}
	}

	.taocan {
		width: 690rpx;
		height: 226rpx;
		z-index: 10;
		border-radius: 20px;
		background: #fff;
		display: flex;
		align-items: center;

		.taocan1 {
			width: 224rpx;
			height: 168rpx;
			margin-left: 20rpx;
		}

		.taocan2 {
			flex-grow: 1;
			height: 168rpx;
			width: calc(100% - 244rpx);

			.taoxxq1 {
				height: 52rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				line-height: 52rpx;
				text-align: left;
				font-style: normal;
				padding-left: 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.taoxxq2 {
				height: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #777777;
				line-height: 50rpx;
				text-align: left;
				font-style: normal;
				padding-left: 20rpx;
			}

			.taoxxq3 {
				height: 66rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.jiage1 {
					flex-grow: 1;
					height: 66rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 40rpx;
					color: #FF3E3E;
					line-height: 66rpx;
					text-align: left;
					font-style: normal;

					span {
						width: 24rpx;
						height: 66rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FF3E3E;
						line-height: 66rpx;
						text-align: left;
						font-style: normal;
						padding-left: 20rpx;
					}
				}

				.right {
					width: 190rpx;
					height: 66rpx;
					display: flex;
					align-items: center;

					.icon {
						width: 44rpx;
						height: 44rpx;
						vertical-align: middle;
					}

					.number {
						font-size: 36rpx;
						vertical-align: middle;
						margin: 0 30rpx;
					}
				}
			}

		}
	}

	page {
		background-color: #F5F8FA;
	}

	.bnts {
		position: fixed;
		padding: 24rpx 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		// background-color: aqua;
		z-index: 999;
	}

	.tit {
		padding: 24rpx;
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		background-color: #F5F8FA;

	}

	.tophead {
		padding: 14rpx 24rpx;
		background-color: #fff;

		.p1 {

			display: flex;

			text {
				&:first-child {
					font-size: 36rpx;
					color: #333;
				}

				&:nth-child(2) {
					width: 200rpx;
					text-align: right;
					font-size: 24rpx;
					color: #FF4141;
					margin-top: 12rpx;
				}

				&:last-child {
					color: #FF4141;
					font-size: 36rpx;
				}
			}

		}

		.p2 {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			text {
				&:nth-child(1) {
					font-size: 28rpx;
					color: #333;
				}
			}
		}
	}
</style>